<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import * as echarts from 'echarts';
  import 'echarts-gl'
  import {onMount} from "svelte";
  import {getPie3D} from "./pie3d";

  let myChart
  onMount(() => {
    myChart = echarts.init(document.getElementById('pie'));
    const data = [
      {name: '水田', value: 30, itemStyle: {color: '#37FFC9'}},
      {name: '水浇地', value: 14, itemStyle: {color: '#31A1FF'}},
      {name: '旱地', value: 2, itemStyle: {color: '#FFF777'}},
    ]
    const option = getPie3D(data, 0.8);
    myChart.setOption(option);
    // option.series.push({
    //   name: 'pie2d',
    //   type: 'pie',
    //   labelLine: {
    //     length: 10,
    //     length2: 10
    //   },
    //   startAngle: -20, //起始角度，支持范围[0, 360]。
    //   clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    //   radius: ['20%', '50%'],
    //   center: ['50%', '50%'],
    //   data: data,
    //   itemStyle: {
    //     opacity: 0
    //   }
    // });
    // myChart.setOption(option);
  })

  function onResize() {
    myChart.resize();
  }
</script>

<svelte:window on:resize={onResize}/>
<div class="h-full flex flex-col">
  <Title title="设备种类分布"/>
  <div id="pie" class="flex-1"></div>
</div>